@mixin input-size($height, $padding, $font-size, $border-radius) {
  height: $height;
  line-height: 1.5;
  padding: $padding;
  font-size: $font-size;

  &.radius {
    border-radius: $border-radius;
  }
}

.ui-input {
  @include input-size($base-height, 4px 7px, $base-fontSize, $base-radius);
  position: relative;
  display: inline-block;
  width: 100%;
  color: #666;
  background-color: #fff;
  background-image: none;
  border: 1px solid #d9d9d9;
  outline: 0;
  transition: border .2s cubic-bezier(0.645, 0.045, 0.355, 1),
              background .2s cubic-bezier(0.645, 0.045, 0.355, 1),
              box-shadow .2s cubic-bezier(0.645, 0.045, 0.355, 1);
  /*box-shadow: inset 0 1px 3px #e3e3e3;*/

  &:focus {
    border-color: #57c5f7;
    outline: 0;
    /*box-shadow: 0 0 0 2px #d5f1fd;*/
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
  }

  &:hover {
    border-color: #57c5f7;
  }

  &.disabled,
  &:disabled {
    cursor: not-allowed;
    background-color: #f3f5f7;
    
    &:focus,
    &.focus {
      border-color: #ccc;
    }
    &:hover {
      border-color: #ccc;
    }
  }

  /* Input sizes */
  &.size-xl {
    @include input-size($base-height-xl, 4px 14px, $base-fontSize-xl, $base-radius-xl);
  }
  &.size-lg {
    @include input-size($base-height-lg, 4px 11px, $base-fontSize-lg, $base-radius-lg);
  }
  &.size-sm {
    @include input-size($base-height-sm, 4px 7px, $base-fontSize-sm, $base-radius-sm);
  }
  &.size-xs {
    @include input-size($base-height-xs, 4px 4px, $base-fontSize-xs, $base-radius-xs);
  }
}

textarea {
  &.ui-input {
    max-width: 100%;
    height: auto !important;
    line-height: 1.5;
    vertical-align: bottom;
  }
}